import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'
import './index.scss'
class DetailCard extends Component {
    render() {
        let { detailData } = this.props
        window.detail = this
        return(
            <div className={`detail-card ${detailData ? 'show-card' : ''}`}>
                <span onClick={_=>this.props.closeCard()}>关闭</span>
                <div>
                    {detailData ? detailData.name : ''}
                </div>
                <div>
                    {detailData ? detailData.detail: ''}
                </div>
            </div>
        )
    }
}
DetailCard = withRouter(DetailCard)
class Index extends Component {
    state={
        detailId: null,
        list: [
            {
                id: 1,
                name: '幸福随心配蛋糕礼盒',
                detail: '详情的数据',
                price: 186,
                img: require('./img/1.jpg')
            },
            {
                id: 2,
                name: '盛大随心配蛋糕礼盒',
                detail: '详情的数据',
                price: 186,
                img: require('./img/2.jpg')
            },
            {
                id: 3,
                name: '幸福随心配蛋糕礼盒',
                detail: '详情的数据',
                price: 186,
                img: require('./img/3.jpg')
            },
            {
                id: 4,
                name: '幸福随心配蛋糕礼盒',
                detail: '详情的数据',
                price: 186,
                img: require('./img/1.jpg')
            }
        ]
    }
    render() {
        window.starBuck = this
        let { list } = this.state
        const newList = list.filter(item => item.num) // 所有商品数量大于0的
        let sum = 0
        newList.forEach(item => {
            sum += item.num * item.price
        })
        console.log('总价', sum)
        return (
            <div>
                {
                    list.map((item, key) => {
                        return (
                            <div className="item" key={key}>
                                <div className="left">
                                    <img src={item.img} />
                                </div>
                                <div className="center">
                                    <div onClick={_ => this.setState({
                                        detailId: item.id
                                    })}>{item.name}</div>
                                    <div>￥{item.price}</div>
                                </div>
                                <div className="right">
                                    {
                                        item.num ? <button onClick={_ => {
                                            // 修改state数据
                                            let newList = []
                                            newList = list.map(goods => {
                                                if(item.id === goods.id) {
                                                    goods.num = goods.num ? goods.num - 1 : 1
                                                }
                                                return goods
                                            })
                                            this.setState({list: newList})
                                        }}>-</button> : null
                                    }
                                    {
                                        item.num ? <input value={item.num} onChange={
                                            e => {
                                                // 修改state数据
                                                let newList = []
                                                newList = list.map(goods => {
                                                    if(item.id === goods.id) {
                                                        console.log(123, e.target.value)
                                                        goods.num = e.target.value ? Number(e.target.value) : 1
                                                    }
                                                    return goods
                                                })
                                                this.setState({list: newList})
                                            }
                                        }/> : null
                                    }
                                    <button onClick={_ => {
                                        // 修改state数据
                                        let newList = []
                                        newList = list.map(goods => {
                                            if(item.id === goods.id) {
                                                goods.num = goods.num ? goods.num + 1 : 1
                                            }
                                            return goods
                                        })
                                        this.setState({list: newList})
                                    }}>+</button>
                                </div>
                            </div>
                        )
                    })
                }
                <div>总价：{
                    sum
                }</div>
                <div>
                    总件数：{newList.length}
                </div>
                
                
                    <DetailCard 
                    detailData={this.state.list.filter(item => item.id === this.state.detailId)[0]}
                    closeCard={_ => {this.setState({detailId: null})}}></DetailCard>
                
            </div>
        )
    }
}
export default Index
